<template>
	<view class="content">
		<u-navbar
			fixed
			safeAreaInsetTop
			placeholder
			bgColor="transparent"
			title="订单详情"
			leftIconColor="#fff"
			titleStyle="#fff"
			@leftClick="onClickLeft"
		>
		</u-navbar>
		<view class="top">
			<view v-if="diffTime > 0" class="last-time">
				<text>剩余支付时间：</text>
				<u-count-down :time="diffTime" format="HH:mm:ss"></u-count-down>
			</view>
			<u--text
				v-else
				:text="
					payStatus === '已支付'
						? `报名成功${detailInfo.payMoney > 0 ? '（已支付）' : ''}`
						: payStatus
				"
				bold
				size="34rpx"
				lines="1"
				color="#333"
			></u--text>
			<u--text
				:text="
					detailInfo.refundStatus == 2
						? '退费成功，欢迎您报名其他赛事！'
						: detailInfo.refundStatus == 3
						? '退费不通过，请查看拒绝原因！'
						: '退费处理中，请稍后查看！'
				"
				size="26rpx"
				lines="1"
				color="#999"
				margin="14rpx 0 0"
				v-if="detailInfo.refundStatus !== 0"
			></u--text>
			<u--text
				:text="
					detailInfo.isPay === 1
						? '您已获得名额，请注意关注活动通知消息！'
						: '未避免错过赛事信息，请及时支付！'
				"
				size="26rpx"
				lines="1"
				color="#888"
				margin="14rpx 0 0"
				v-else-if="detailInfo.isClose !== 1"
			></u--text>
		</view>

		<view class="address">
			<text class="address-tlt">活动信息</text>
			<view class="news">
				<image :src="detailInfo.raceImg" class="news-img" mode="aspectFill"></image>
				<view class="news-right">
					<u--text
						:text="detailInfo.raceName"
						bold
						size="32rpx"
						lines="1"
						margin="8rpx 0 24rpx"
					></u--text>
					<u-icon
						name="map"
						color="#999"
						size="16"
						:label="detailInfo.cityRegion"
						labelSize="28rpx"
						labelColor="#999"
					></u-icon>
					<view style="margin-top: 20rpx">
						<u-icon
							name="clock"
							color="#999"
							size="14"
							:label="detailInfo.groupStartTime"
							labelSize="26rpx"
							labelColor="#999"
						></u-icon>
					</view>
				</view>
			</view>
			<view class="flex-lr-c">
				<view>
					<u--text
						:text="`报名项目:${detailInfo.groupName}`"
						bold
						size="28rpx"
						lines="1"
						color="#333"
					></u--text>
					<u--text
						:text="`摇号规则：${
							detailInfo.competeRule === 1
								? '按支付顺序分配名额'
								: detailInfo.competeRule === 2
								? '支付完成后，需要抽签'
								: '先摇号后付费'
						}`"
						block
						size="26rpx"
						lines="1"
						color="#999"
						margin="10rpx 0 0"
					></u--text>
				</view>
				<u-button
					v-if="detailInfo.isCompete != 0"
					:text="detailInfo.isCompete == 1 ? '已中签' : '未中签'"
					:color="detailInfo.isCompete == 1 ? '#e50012' : '#bebfbf'"
					shape="circle"
					size="small"
					customStyle="width:150rpx;height:52rpx;font-size:32rpx"
				></u-button>
			</view>
		</view>

		<view class="address">
			<text class="address-tlt" style="margin-bottom: 10rpx">报名信息</text>
			<u-cell-group :border="false">
				<u-cell title="姓名" :border="false" :value="detailInfo.playerName"></u-cell>
				<u-cell
					title="选手"
					:border="false"
					:value="detailInfo.playerType == 1 ? '成人' : '儿童'"
				></u-cell>
				<u-cell title="证件号" :border="false" :value="detailInfo.playerCidNo"></u-cell>
				<u-cell title="手机号" :border="false" :value="detailInfo.playerMobile"></u-cell>
				<template v-if="detailInfo.payMoney > 0">
					<u-line dashed margin="10rpx 0 14rpx" color="#aaa"></u-line>
					<u-cell title="订单金额" :border="false" titleStyle="color:#333;font-weight:600;">
						<view slot="value" style="font-size: 34rpx">￥{{ detailInfo.payMoney }} </view>
					</u-cell>
				</template>
				<u-line dashed margin="12rpx 0" color="#999"></u-line>
			</u-cell-group>
			<view class="address-footer">
				<u-button
					text="分享海报"
					plain
					size="small"
					shape="circle"
					color="#0071c5"
					customStyle="width:140rpx"
					@click="onSharePoster"
				></u-button>
				<u-button
					text="报名详情"
					plain
					size="small"
					shape="circle"
					customStyle="width:140rpx;margin-left:20rpx;border-color:#999;"
					@click="onSignDetail"
				></u-button>
			</view>
		</view>

		<view class="address">
			<text class="address-tlt" style="margin-bottom: 24rpx">订单信息</text>
			<u-cell-group :border="false">
				<u-cell title="订单编号" :border="false" :value="detailInfo.orderId"></u-cell>
				<u-cell title="报名时间" :border="false" :value="detailInfo.addTime"></u-cell>
				<template v-if="detailInfo.payMoney > 0">
					<u-cell title="订单状态" :border="false" :value="payStatus"></u-cell>
					<template v-if="detailInfo.isPay === 1">
						<u-cell title="支付时间" :border="false" :value="detailInfo.payTime"></u-cell>
						<u-cell title="支付方式" :border="false" value="微信"></u-cell>
					</template>
				</template>
			</u-cell-group>
		</view>
		<template v-if="detailInfo.isClose !== 1">
			<!-- 已支付refundStatus== 1申请退款 2退款通过  -->
			<view
				class="footer"
				v-if="
					detailInfo.isPay == 1 &&
					detailInfo.isShowRefund == 1 &&
					detailInfo.refundStatus !== 1 &&
					detailInfo.refundStatus !== 2
				"
			>
				<button
					class="footer-btn btn-single"
					@click="onReturnConfirm('detail', detailInfo.orderId)"
				>
					申请退费
				</button>
			</view>
			<!-- 退款处理中，禁止操作 -->
			<view class="footer" v-else-if="detailInfo.refundStatus == 2 || detailInfo.isPay == 0">
				<!-- 已退费-->
				<button
					class="footer-btn btn-single"
					@click="onReturnDetail"
					v-if="detailInfo.refundStatus == 2"
				>
					退费详情
				</button>
				<!-- 未支付 -->
				<template v-else-if="detailInfo.isPay == 0">
					<button
						class="footer-btn footer-btn-cancel"
						@click="onCancelOrder('detail', detailInfo.orderId)"
					>
						取消报名
					</button>
					<button
						class="footer-btn"
						@click="onGoPayment('detail', detailInfo.raceId)"
						style="background-color: #e50012"
					>
						继续付款
					</button>
				</template>
			</view>
		</template>
		<canvas
			canvas-id="myCanvas"
			:style="{ width: width + 'px', height: height + 'px' }"
			v-show="false"
		></canvas>
	</view>
</template>

<script>
import { formatTime } from '@/utils/util.js'
import orderMixin from './orderMixin.js'
export default {
	mixins: [orderMixin],
	data() {
		return {
			textarea: '',
			id: '',
			signType: '',
			detailInfo: {
				is_cancel: '1',
				od_pay_status: '3'
			},
			width: 750,
			height: 300
		}
	},
	onLoad(options) {
		this.id = options.id
		this.getDetailInfo()
	},
	computed: {
		payStatus() {
			const { refundStatus, isPay, isClose } = this.detailInfo
			return isClose === 1
				? '已取消'
				: refundStatus === 1
				? '退款中'
				: refundStatus === 2
				? '退款成功'
				: refundStatus === 3
				? '退款不通过'
				: isPay === 1
				? '已支付'
				: '未支付'
		},
		signStatus() {
			return this.detailInfo.isCompete == 1
				? '已中签'
				: this.detailInfo.isCompete == 2
				? '未中签'
				: '未出结果'
		},
		diffTime() {
			const { competeRule, isPay, addTime, cancelOrderTime } = this.detailInfo
			if (competeRule < 3 && isPay == 0 && cancelOrderTime) {
				const minus = cancelOrderTime * 60 * 1000
				const now = new Date().getTime()
				const orderTime = new Date(addTime).getTime()
				const diff = parseInt(orderTime + minus - now)
				return diff > 0 ? diff : 0
			} else {
				return 0
			}
		}
	},
	methods: {
		getDetailInfo(id) {
			/* prettier-ignore */
			this.$https(true, 'get', {
				url: '/member/order/info/'+this.id,
				data: {}
			},(res) => {
				this.detailInfo = res.data
			})
			/* prettier-ignore */
		},
		onSignDetail() {
			uni.navigateTo({
				url: '/pagesA/my/order/signinfo',
				success: (res) => {
					res.eventChannel.emit('sendData', this.detailInfo.players)
				}
			})
		},
		// 退费详情
		onReturnDetail() {
			uni.navigateTo({
				url: '/pagesA/my/order/refundDetail',
				success: (res) => {
					res.eventChannel.emit('sendData', this.detailInfo)
				}
			})
		},
		onClickLeft() {
			const pages = getCurrentPages()
			if (pages.length < 2) {
				uni.reLaunch({ url: '/pages/index/index' })
			} else {
				uni.navigateBack({ delta: 1 })
			}
		},
		onSharePoster() {
			if (this.isClick) return
			this.isClick = true
			uni.showLoading({
				title: '海报生成中~'
			})
			/* prettier-ignore */
			this.$https(true, 'get', {
				url: '/member/share/poster/'+this.id,
				data: {}
			},(res) => {
				uni.previewImage({
					urls:[res.data]
				})
				this.isClick = false
				return
				uni.getImageInfo({
					src: res.data,
					success: (res) => {
						this.width= res.width
						this.height= res.height
						// this.canvasTemp(res.path)
						this.saveImg(res.path)
					},
					fail: (err) => {
						console.error(err)
						uni.$u.toast('图片解析失败，请稍后重试！')
					}
				})
			},err=>{
				this.isClick = false
			})
			/* prettier-ignore */
		},
		// 生成canvas图片
		canvasTemp(path) {
			const ctx = uni.createCanvasContext('myCanvas', this)
			ctx.draw(false, () => {
				uni.canvasToTempFilePath(
					{
						canvasId: 'myCanvas',
						destWidth: this.width * 2,
						destHeight: this.height * 2,
						quality: 1,
						fileType: 'jpg',
						success: (res) => {
							console.log('图片已保存至本地：', res.tempFilePath)
							this.saveImg(res.tempFilePath)
						},
						fail: (res) => {
							uni.$u.toast('生成失败，请稍后重试！')
							console.log(res)
						}
					},
					this
				)
			})
		},
		saveImg(path) {
			uni.saveImageToPhotosAlbum({
				filePath: path,
				success: () => {
					uni.$u.toast('保存成功！')
					setTimeout(() => {
						this.isClick = false
					}, 600)
				},
				fail: (err) => {
					setTimeout(() => {
						this.isClick = false
					}, 600)
					console.log(err)
					uni.getSetting({
						success(res) {
							if (!res.authSetting['scope.writePhotosAlbum']) {
								//授权被拒
								uni.showModal({
									title: '提示',
									content: '未检测到您的保存到相册权限，请授权权限！',
									success(res) {
										if (res.confirm) {
											uni.openSetting({
												success(res) {
													if (res.authSetting['scope.writePhotosAlbum']) {
														uni.saveImageToPhotosAlbum({
															filePath: path,
															success: () => {
																uni.$u.toast('保存成功！')
															}
														})
													}
												}
											})
										} else {
											uni.showToast({ title: '授权被拒，保存失败！', icon: 'none' })
										}
									}
								})
								uni.hideLoading()
							}
						}
					})
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.content {
	width: 100%;
	padding: 0 0 130rpx;
	position: relative;
}
.top {
	width: calc(100% - 120rpx);
	padding: 50rpx 60rpx 90rpx;
	background: linear-gradient(
		0deg,
		#f7f7f7 0%,
		rgba(240, 243, 245, 0.9) 12%,
		rgba(221, 232, 241, 0.8) 24%,
		rgba(189, 215, 235, 0.8) 40%,
		#77b2de 100%
	);
}
.address {
	padding: 24rpx 32rpx;
	width: calc(702rpx - 64rpx);
	overflow-x: hidden;
	background-color: #fff;
	border-radius: 16rpx;
	margin: 0 auto 24rpx;
	&-tlt {
		font-size: 28rpx;
		color: #898989;
		border-bottom: 1px solid #e9e9e9;
		display: block;
		padding-bottom: 18rpx;
		&:before {
			display: inline-block;
			content: '';
			width: 8rpx;
			height: 30rpx;
			float: left;
			margin: 4rpx 10rpx 0;
			background-color: #0071c5;
		}
	}
	&-footer {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding: 12rpx 10rpx 0 0;
	}
	.news {
		display: flex;
		position: relative;
		margin: 24rpx 0;
		padding-bottom: 26rpx;
		border-bottom: 1px #e9e9e9 dashed;
		&-wrap {
			width: calc(100% - 40rpx);
			background-color: #fff;
			margin-bottom: 20rpx;
			padding: 24rpx 20rpx;
		}
		&-img {
			width: 160rpx;
			height: 160rpx;
		}
		&-right {
			margin-left: 26rpx;
			max-width: 500rpx;
			width: 500rpx;
		}
	}
}
.footer {
	width: calc(100% - 48rpx);
	padding: 0 24rpx;
	height: 120rpx;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	bottom: 0;
	z-index: 9;
	border-top: 1px solid #e5e5e5;
	&-btn {
		width: 424rpx;
		height: 80rpx;
		background-color: #0071c5;
		border-radius: 16rpx;
		font-size: 30rpx;
		color: #fff;
		margin: 0;
		&-cancel {
			width: 240rpx;
			background-color: #eff2f3;
			color: #222;
			margin-right: 22rpx;
		}
	}
}
.btn-single {
	width: 684rpx;
}
.last-time {
	color: #333;
	display: flex;
	align-items: center;
}
.comment {
	margin-top: 16rpx;
	::v-deep {
		.u-cell .u-cell__body {
			padding: 10rpx 0 !important;
		}
	}
}
::v-deep {
	.u-navbar--fixed {
		background: linear-gradient(0deg, #77b2de, #358ed1) !important;
	}
	.u-navbar__content__left .u-icon__icon {
		color: #333 !important;
	}
	.u-cell .u-cell__body {
		padding: 8rpx 24rpx;
		.u-cell__title-text {
			font-size: 28rpx;
			color: #898989;
		}
		.u-cell__value {
			font-size: 28rpx;
			font-weight: 500;
			color: #231815;
		}
	}
	.u-button {
		margin: 0;
	}
	.last-time .u-count-down__text {
		color: #333;
		font-size: 34rpx;
	}
}
</style>
